import { businessAdd, businessInfo, businessUpdate } from "@/services/chargingManage";
import { getUuid } from "@/utils/utils";
import { Button, Checkbox, Col, Divider, Drawer, Form, Icon, Input, message, Modal, Radio, Row, Tabs, Upload } from "antd";
import React from "react";
import ManageList from "./manageList";
import { formatMessage } from 'umi-plugin-react/locale';

class BusinessReadonly extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      visible:false,
      id:null,
      imgList:[],
      relationList:[],
      activeKey:"info"
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  initModal = id => {
    this.setState({
      visible:true,
      id
    },() => {
      if(id){
        this.getDetail()
      }
    })
  }

  getDetail = async () => {
    const res = await businessInfo({id:this.state.id})
    let obj = {}
    let fields = [
      "name",
      // "locationType",
      "useTypes",
      "unifiedSocialCreditCode",
      "dengbaishiCode",
      "address",
      "userName",
      "userPhone",
      "userMail",
      "safeType",
      "safeMail",
      "safePhone"
    ]
    for(const item of fields){
      obj[item] = res[item]
    }
    this.props.form.setFieldsValue(obj)
    this.setState({imgList:res.certs,relationList:res.relations})

  }

  render(){
    const { visible,id,imgList,relationList,activeKey } = this.state
    const { form:{getFieldDecorator,getFieldValue} } = this.props;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };

    return (
      <Tabs activeKey={activeKey} onChange={activeKey => this.setState({activeKey})} className="business-readonly">
        <Tabs.TabPane tab={formatMessage({ id: 'businessReadonly.businessInfoMaintenance' })} key="info" >
          <Form {...formItemLayout} className="normalForm" style={{marginBottom:64}}>
            <Row>
              <Col span={12}>
                <strong>{formatMessage({ id: 'businessReadonly.basicInfo' })}</strong>
                <Form.Item label={formatMessage({ id: 'businessReadonly.companyName' })}>
                  {getFieldDecorator("name",{rules:[{required:true,message:formatMessage({ id: 'businessReadonly.pleaseInput' })}]})(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.registeredName' })} disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.usagePositioning' })}>
                  {getFieldDecorator('useTypes',{rules:[{required:true,message:formatMessage({ id: 'businessReadonly.pleaseInput' })}]})(
                    <Checkbox.Group disabled>
                      <Checkbox value={'0'}>{formatMessage({ id: 'businessReadonly.signingParty' })}</Checkbox>
                      <Checkbox value={'1'}>{formatMessage({ id: 'businessReadonly.usingParty' })}</Checkbox>
                      <Checkbox value={'2'}>{formatMessage({ id: 'businessReadonly.settlementParty' })}</Checkbox>
                    </Checkbox.Group>
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <strong>{formatMessage({ id: 'businessReadonly.enterpriseInfo' })}</strong>
                <Form.Item label={formatMessage({ id: 'businessReadonly.unifiedSocialCreditCode' })}>
                  {getFieldDecorator("unifiedSocialCreditCode")(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.uniqueIdentifier' })} disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.dunAndBradstreetCode' })}>
                  {getFieldDecorator("dengbaishiCode")(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.noCreditCode' })} disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.contactAddress' })}>
                  {getFieldDecorator("address")(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.contractAddress' })} disabled />
                  )}
                </Form.Item>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <strong>{formatMessage({ id: 'businessReadonly.enterpriseAccount' })}</strong>
                <Form.Item label={formatMessage({ id: 'businessReadonly.mainAdminName' })}>
                  {getFieldDecorator("userName")(
                    <Input disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.contactPhone' })}>
                  {getFieldDecorator("userPhone")(
                    <Input disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.billingEmail' })}>
                  {getFieldDecorator("userMail")(
                    <Input disabled />
                  )}
                </Form.Item>
              </Col>
              <Col span={12}>
                <strong>{formatMessage({ id: 'businessReadonly.changeManagement' })}</strong>
                <Form.Item label={formatMessage({ id: 'businessReadonly.verificationMethod' })} colon={false}>
                  {getFieldDecorator("safeType",{initialValue:0})(
                    <Radio.Group disabled>
                      <Radio value={0}>{formatMessage({ id: 'businessReadonly.securityEmail' })}</Radio>
                      <Radio value={1}>{formatMessage({ id: 'businessReadonly.enterpriseAuthorizationSMS' })}</Radio>
                    </Radio.Group>
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.securityEmail' })}>
                  {getFieldDecorator("safeMail")(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.privateEmail' })} disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.authenticationPhone' })}>
                  {getFieldDecorator("safePhone")(
                    <Input placeholder={formatMessage({ id: 'businessReadonly.authenticationPhone' })} disabled />
                  )}
                </Form.Item>
                <Form.Item label={formatMessage({ id: 'businessReadonly.authorizationCertificate' })}>
                  <div style={{display:"flex",marginTop:10,flexWrap:"wrap",gap:"10px"}}>
                    {
                      imgList.map(item => {
                        return (
                          <div key={item.imgUrl}>
                            <img src={item.imgUrl} style={{width:80,height:40,marginBottom:10}} />
                            <div style={{textAlign:"center"}}>
                              <a href={item.imgUrl} target="_blank" style={{marginRight:8}}>{formatMessage({ id: 'businessReadonly.view' })}</a>
                            </div>
                          </div>
                        )
                      })
                    }
                  </div>
                </Form.Item>
              </Col>
            </Row>

            <Divider style={{marginTop:0}} />

            <Row>
              <Col span={24}>
                <div style={{marginBottom:10}}>
                  <strong>{formatMessage({ id: 'businessReadonly.relationshipGraph' })}</strong>
                </div>
                {
                  relationList.map((item,index) => {
                    return (
                      <Row style={{borderBottom:"1px solid #e8e8e8",marginBottom:24}} key={item.id}>
                        <Col span={6}>
                          <Form.Item label={formatMessage({ id: 'businessReadonly.associatedEnterprise' })} labelCol={{span:6}}>
                            <Input disabled value={item.relEnterprise} onChange={e => this.changeValue(e.target.value,index,'relEnterprise')} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item label={formatMessage({ id: 'businessReadonly.uniqueID' })} labelCol={{span:6}}>
                            <Input disabled value={item.uniqueId} onChange={e => this.changeValue(e.target.value,index,'uniqueId')} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item label={formatMessage({ id: 'businessReadonly.relationshipType' })} labelCol={{span:6}}>
                            <Input disabled value={item.relType} onChange={e => this.changeValue(e.target.value,index,'relType')} placeholder={formatMessage({ id: 'businessReadonly.upstreamDownstream' })} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item label={formatMessage({ id: 'businessReadonly.relationship' })} labelCol={{span:6}}>
                            <Input disabled value={item.rel} onChange={e => this.changeValue(e.target.value,index,'rel')} placeholder={formatMessage({ id: 'businessReadonly.supplierCustomer' })} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item  label={formatMessage({ id: 'businessReadonly.contactPerson' })} labelCol={{span:6}}>
                            <Input disabled value={item.userName} onChange={e => this.changeValue(e.target.value,index,'userName')} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item  label={formatMessage({ id: 'businessReadonly.contactPhone' })} labelCol={{span:6}}>
                            <Input disabled value={item.userPhone} onChange={e => this.changeValue(e.target.value,index,'userPhone')} />
                          </Form.Item>
                        </Col>
                        <Col span={6}>
                          <Form.Item  label={formatMessage({ id: 'businessReadonly.contactAddress' })} labelCol={{span:6}}>
                            <Input disabled value={item.address} onChange={e => this.changeValue(e.target.value,index,'address')} />
                          </Form.Item>
                        </Col>
                      </Row>
                    )
                  })
                }
              </Col>
            </Row>

          </Form>
        </Tabs.TabPane>
        <Tabs.TabPane tab={formatMessage({ id: 'businessReadonly.contractManagement' })} key="contract" disabled={!id}>
          {
            activeKey === 'contract' ? <ManageList type='contract' enterpriseId={id} readonly={true} /> : ''
          }
        </Tabs.TabPane>
        <Tabs.TabPane tab={formatMessage({ id: 'businessReadonly.projectManagement' })} key="project" disabled={!id}>
          {
            activeKey === 'project' ? <ManageList type='project' enterpriseId={id} readonly={true} /> : ''
          }
        </Tabs.TabPane>
      </Tabs>
    )
  }
}

export default Form.create()(BusinessReadonly)